
$(function () {
    //API 排行
    updataAqiTop();
});

//更新AQI排行
function updataAqiTop() {
    $.ajaxGet(baseUri + 'getAQIByUserId',
        {
            fsiteParent: fsiteNo,
            userId: userId
        },
        function (d) {
            reloadChartBarTop("chart_5", d.list);
            reloadMap("chart_map", d.list)
        });
}

//加载地图
function reloadMap(id, data) {
    var xData = data.map(function (d) {
        return { id: d.fsiteNo, name: d.fsiteName, value: d.faqi }
    });

    var myChart = echarts.init(document.getElementById(id));
    var option = {
        //提示组件
        tooltip: {
            trigger: 'item',
            formatter: function (params, ticket, callback) {
                if (isNaN(parseInt(params.value)))
                    return `${params.name}<br/>没有数据`;
                else
                    return `${params.name}<br/>AQI ${params.value}`;
            },
            textStyle: { color: "#fff" }
        },
        visualMap: {
            min: 0,
            max: 500,
            text: ['最高', '最低'],
            realtime: false,
            calculable: true,
            inRange: { color: ['#00e400', '#ffff00', '#ff7e00', '#ff0000', '#99004c', '#7e0023'] },
            textStyle: { color: "#fff", },
            show: false,
        },

        series: [{
            type: 'map',
            mapType: '上海',
            zoom: 1.2,//地图放大比例
            itemStyle: {
                normal: {
                    label: {
                        show: true, color: '#99004c', formatter: function (params) {
                            if (isNaN(parseInt(params.value)))
                                return `${params.name}\n 没有数据`;
                            else
                                return `${params.name}\n AQI ${params.value}`;
                        }
                    },
                },
                emphasis: { label: { show: false } }
            },
            data: xData,
        }],
    };

    myChart.setOption(option);

    //地图点击事件
    myChart.on('click', function (params) {
        if (params.componentSubType == "map") {
            if (isNaN(parseInt(params.value))) return;
            var name = encodeURIComponent(params.data.name);
            location.href = `area.html?id=${params.data.id}&name=${name}`;
        }
    });
}

//加载柱状图(排行)
function reloadChartBarTop(id, data) {
    var xArray = data.map(function (d) {
        return { id: d.fsiteNo, name: d.fsiteName, value: d.faqi }
    }).sort(function (a, b) {
        return a.value - b.value;
    });

    var yArray = xArray.map(function (d) {
        return d.name;
    });

    var myChart = echarts.init(document.getElementById(id));
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: '{b}:<br/>AQI:{c}'
        },
        grid: {
            left: '3%',
            right: '7%',
            top: '10%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF',
                    fontSize: '10'
                }
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: ['red']
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 2,
                }
            }
        },
        yAxis: {
            type: 'category',
            data: yArray,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            // y轴的颜色和宽度
            axisLine: {
                lineStyle: {
                    color: '#FFFFFF',
                    width: 1,
                }
            }
        },
        series: [
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return getColor(getAqiIndex(params.value));
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        color: 'black',
                        position: 'inside'//文本显示位置
                    }
                },
                data: xArray
            }]
    };

    myChart.setOption(option);

    myChart.on('click', function (params) {
        location.href = `area.html?id=${params.data.id}&name=${params.data.name}`;
    });
}

